<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row>
        <el-input
          v-model="listQuery.key_word"
          placeholder="关键字"
          style="width: 200px"
          class="filter-item"
        />
        <el-button
          class="filter-item"
          type="info"
          size="mini"
          style="width: 60px;"
          @click="getImage"
        >搜索
        </el-button>
        <!--        <el-button-->
        <!--          class="filter-item"-->
        <!--          type="primary"-->
        <!--          icon="el-icon-plus"-->
        <!--          @click="addImageForm"-->
        <!--        >Add-->
        <!--        </el-button>-->
      </el-row>
    </div>

    <el-table
      empty-text="-"
      v-loading="listLoading"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column type="index" width="50" />
      <el-table-column
        v-for="(ctl, index) in table_ctl"
        :formatter="ctl.formatter"
        :sortable="ctl.sortable"
        :key="index"
        :label="ctl.label"
        :prop="ctl.prop"
        v-if="ctl.visiable"
        align="center"
      ></el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200px"
      >
        <template slot="header" slot-scope="scope">
          <span style="margin-right: 15px">操作</span>
        </template>
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :hide-after="500"
            content="edit"
            placement="top"
          >
            <el-button
              icon="el-icon-edit"
              circle
              size="medium"
              @click="updateImage(scope.row)"
              type="primary"
            ></el-button>
          </el-tooltip>
          <!--          <el-tooltip class="item" effect="dark" :hide-after="500" content="delete" placement="top">-->
          <!--            <el-button icon="el-icon-delete" circle size="medium" type="danger"-->
          <!--                       @click="showDeleteForm(scope.row)"></el-button>-->
          <!--          </el-tooltip>-->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      style="width: 100%"
      @close="dialogClose"
      custom-class="dialogwidth"
    >
      <el-form
        ref="dataForm"
        :model="form"
        label-position="right"
        label-width="150px"
      >
        <div class="">
          <el-form-item label="名字：">
            <el-input readonly v-model="form.NAME"></el-input>
          </el-form-item>
          <!--          <el-form-item>-->

          <!--            <el-upload-->
          <!--              class="upload-demo"-->
          <!--              action="https://jsonplaceholder.typicode.com/posts/"-->
          <!--              :limit="1">-->
          <!--              <el-button size="small" type="primary">Upload</el-button>-->
          <!--            </el-upload>-->
          <!--          </el-form-item>-->
          <el-form-item label="文件：">
            <el-upload
              action="#"
              :on-preview="handlePictureCardPreview"
              :file-list="ImageFileList"
              ref="upload"
              :http-request="uploadImage"
              :on-change="fileChange"
              :limit="1"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PBG,.GIF,.mp4,.MP4,"
              :before-upload="beforePicUpload"
            >
              <div slot="tip" class="el-upload__tip">
                只可以上传 .png / .jpeg / .jpg / .mp4 / .gif 格式文件!
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item label="视频：" v-if="videoForm.showVideoPath !='' && !videoFlag">
            <video v-if="videoForm.showVideoPath !='' && !videoFlag"
                   v-bind:src="videoForm.showVideoPath"
                   class="avatar video-avatar"
                   style="width: 320px;height: 180px"
                   controls="controls">
              您的浏览器不支持视频播放
            </video>
<!--            <div class="pic_img">-->
<!--              <div class="pic_img_box">-->
<!--                <el-upload class="avatar-uploader"-->
<!--                           action="上传地址"-->
<!--                           v-bind:data="{FoldPath:'上传目录',SecretKey:'安全验证'}"-->
<!--                           v-bind:on-progress="uploadVideoProcess"-->
<!--                           v-bind:on-success="handleVideoSuccess"-->
<!--                           :http-request="uploadImage"-->
<!--                           v-bind:before-upload="beforeUploadVideo"-->
<!--                           v-bind:show-file-list="false">-->
<!--                  <video v-if="videoForm.showVideoPath !='' && !videoFlag"-->
<!--                         v-bind:src="videoForm.showVideoPath"-->
<!--                         class="avatar video-avatar"-->
<!--                         controls="controls">-->
<!--                    您的浏览器不支持视频播放-->
<!--                  </video>-->
<!--                  <i v-else-if="videoForm.showVideoPath =='' && !videoFlag"-->
<!--                     class="el-icon-plus avatar-uploader-icon"></i>-->
<!--                  <el-progress v-if="videoFlag == true"-->
<!--                               type="circle"-->
<!--                               v-bind:percentage="videoUploadPercent"-->
<!--                               style="margin-top:7px;"></el-progress>-->
<!--                </el-upload>-->
<!--              </div>-->
<!--            </div>-->
          </el-form-item>
          <!--          <el-form-item label="启用：">-->
          <!--            <el-switch v-model="form.valid"></el-switch>-->
          <!--          </el-form-item>-->
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <!--        <el-button @click="dialogFormVisible = false">取消</el-button>-->
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <!--        <el-button type="primary" @click="dialogStatus==='create'?addImage():editAppUser()">确定</el-button>-->
      </div>
    </el-dialog>
    <el-dialog
      title="表格列编辑"
      :visible.sync="table_dialog_form_visiable"
      style="width: 100%"
      custom-class="dialogwidth"
    >
      <el-form ref="dataForm" label-position="left" label-width="200px">
        <div class="lb">
          <el-form-item
            :label="ctl.label + '：'"
            v-for="(ctl, index) in table_ctl"
            :key="index"
          >
            <el-switch
              v-model="ctl.visiable"
              active-text="可见"
              inactive-text="不可见"
              active-color="#13ce66"
              inactive-color="#666666"
            ></el-switch>
          </el-form-item>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="table_dialog_form_visiable = false">确定</el-button>
      </div>
    </el-dialog>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :page-sizes="[20, 50, 99]"
      :page-size="99"
      :limit.sync="listQuery.limit"
      @pagination="getImage"
    />
  </div>
</template>

<script>
  import Pagination from "@/components/Pagination/index"; // secondary package based on el-pagination
  import Vue from "vue";
  import { getToken } from "@/utils/auth";
  import { addImage, editImage, removeImage, getImageList } from "@/api/images";

  export default {
    components: { Pagination },
    data() {
      return {
        list: [],
        total: 0,
        rechargeForm: {},
        user_monthly: {},

        ImageFileList: [],
        table_dialog_form_visiable: false,
        table_ctl: [
          {
            label: "ID",
            prop: "ID",
            sortable: false,
            visiable: true,
            formatter: null,
          },
          {
            label: "名字",
            prop: "NAME",
            sortable: false,
            visiable: true,
            formatter: null,
          },
          {
            label: "地址",
            prop: "ADDRESS",
            sortable: false,
            visiable: true,
            formatter: null,
          },
          {
            label: "创建时间",
            prop: "createTime",
            sortable: false,
            visiable: true,
            formatter: null,
          },
        ],
        total_price: 0,
        package_type_list: [
          { value: 1, label: "1个月" },
          { value: 3, label: "3个月" },
          { value: 6, label: "6个月" },
          { value: 12, label: "12个月" },
        ],
        rechargeFormVisible: false,
        role_list: ["商家", "管理员"],
        listLoading: false,
        form: {},
        baseUrl: process.env.VUE_APP_BASE_API,
        headers: {
          Authorization: getToken(),
        },
        fileVisible: false,
        fileImageUrl: "",
        fileName: "",
        pic_host:"https://www.11parking.com/img_upload/",
        videoFlag: false,
        //是否显示进度条
        videoUploadPercent: "",
        //进度条的进度，
        isShowUploadVideo: false,
        //显示上传按钮
        videoForm: {
          showVideoPath: ''
        },
        dialogFormVisible: false,
        textMap: {
          edit: "编辑",
          create: "添加",
        },
        dialogStatus: "",
        listQuery: {
          page: 1,
          limit: 99,
          start_time: null,
          end_time: null,
        },
      };
    },
    created() {
      this.getImage();
    },
    mounted() {},
    methods: {
      getImage() {
        let _this = this;
        _this.listLoading = true;
        getImageList(_this.listQuery).then((response) => {
          _this.list = response.items;
          _this.listLoading = false;
        });
      },
      addImage() {
        let _this = this;
        let para = Object.assign({}, _this.form);
        // para.roles = [para.roles]
        addImage(para).then((res) => {
          if (res.code === 20000) {
            _this.$message({
              type: "success",
              message: res.message,
            });
            _this.dialogFormVisible = false;
            _this.getImage();
          }
        });
      },
      addImageForm() {
        this.resetForm();
        this.dialogStatus = "create";
        this.dialogFormVisible = true;
      },
      updateImage(row) {
        this.resetForm();
        this.form = Object.assign({}, row);
        this.dialogStatus = "edit";
        this.ImageFileList = [
          {
            ID: row.ID,
            NAME: row.NAME,
            url: this.pic_host + row.ADDRESS,
          },
        ];
        if(row.ADDRESS.indexOf('mp4') > -1 ||row.ADDRESS.indexOf('MP4') > -1 ){
          this.videoForm.showVideoPath = this.pic_host + row.ADDRESS
        }
        this.dialogFormVisible = true;
      },
      uploadImage(params) {
        let _this = this
        const formData = new FormData();
        const file = params.file;
        formData.append("NAME", this.form.NAME);
        formData.append("ID", this.form.ID);
        formData.append("file", file);

        const loading = this.$loading({
          lock: true,
          text: "upload",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });

        editImage(formData)
          .then((res) => {
            loading.close();
            if (res.code == 20000) {
              // this.ImageFileList = [
              //   {
              //     ID: res.ID,
              //     NAME: res.NAME,
              //     url: this.pic_host + row.ADDRESS,
              //   },
              // ];
              // _this.ImageFileList[0].url = _this.pic_host + res.ADDRESS
              if(res.ADDRESS.indexOf('mp4') > -1 ||res.ADDRESS.indexOf('MP4') > -1 ){
                _this.videoForm.showVideoPath = _this.pic_host + res.ADDRESS
              }else{
                _this.videoForm.showVideoPath = ''
              }
              _this.$message({
                type: "success",
                message: "上传成功",
              });
              params.onSuccess(); // 上传成功的图片会显示绿色的对勾
              // 但是我们上传成功了图片， fileList 里面的值却没有改变，还好有on-change指令可以使用
            } else {
              _this.$message({
                type: "error",
                message: "上传失败",
              });
              params.onError(); // 上传成功的图片会显示绿色的对勾
              // 但是我们上传成功了图片， fileList 里面的值却没有改变，还好有on-change指令可以使用
            }
          })
          .catch((res) => {
            loading.close();
            console.log("图片上传失败");
          });
      },
      fileChange(file) {
        this.$refs.upload.clearFiles(); //清除文件对象
        this.logo = file.raw; // 取出上传文件的对象，在其它地方也可以使用
        this.ImageFileList = [{ name: file.name, url: file.url }]; // 重新手动赋值filstList， 免得自定义上传成功了, 而fileList并没有动态改变， 这样每次都是上传一个对象
        this.form.NAME = file.name;
      },
      resetForm() {
        this.form = {};
        this.rechargeForm = { valid_months: 1, valid: true };
      },



      dialogClose() {
        this.ImageFileList = [];
      },
      beforePicUpload(file) {
        const isPG =
          file.type === "image/png" ||
          file.type === "image/jpeg" ||
          file.type === "image/jpg" ||
          file.type === "image/gif" ||
          file.type === "video/mp4";
        if (!isPG) {
          this.$message.error(
            "只可以上传 .png / .jpeg / .jpg / .mp4 / .gif 格式文件!"
          );
        }
        let name_not_exist =
          this.form.NAME === "" ||
          this.form.NAME === null ||
          this.form.NAME === undefined;
        if (name_not_exist) {
          this.$message.error("请输入名字!");
        }
        return isPG && !name_not_exist;
      },
      removeImage(row) {
        let _this = this;
        removeImage(row.id).then((res) => {
          if (res.code === 20000) {
            _this.$message({
              type: "success",
              message: "删除成功!",
            });
            _this.getImage();
          }
        });
      },
      tableFormat(row, column, index) {
        // console.log(row, column, index)
        let str = "";
        switch (column.property) {
          case "updateTime":
            str = row.updateTime ? row.updateTime.slice(0, 10) : "";
            break;
          case "createTime":
            str = row.createTime.slice(0, 10);
            break;
        }
        return str;
      },
      handlePictureCardPreview(file) {
        this.fileName = file.name;
        this.fileImageUrl = file.url;
        this.fileVisible = true;
      },
      showDeleteForm(row) {
        this.$confirm("Delete image ID:「" + row.ID + "」?", "Hint", {
          confirmButtonText: "Confirm",
          cancelButtonText: "Cancel",
          type: "warning",
        })
          .then(() => {
            this.removeImage(row);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "Canceled",
              duration: 500,
            });
          });
      },
    },
  };
</script>
